<template>
  <div px-24rpx pb-100rpx flex flex-wrap gap-8rpx>
    <!-- 宫格版本商品展示 -->
    <div bg-white w-228rpx v-for="(item, index) in props.list" :key="index" @click="handleClickGoods(item)">
      <image v-if="item.thumbnail" @error="item.thumbnail = ''" w-228rpx h-230rpx :src="item.thumbnail" />
      <div v-else w-228rpx h-230rpx bg-color text-24rpx flex flex-a-c flex-j-c>图片已失效</div>
      <div p-12rpx>
        <!--  -->
        <div class="wes-2" pb-20rpx text-24rpx h-49rpx>
          {{ item.goodsName || '商品已失效' }}
        </div>
        <div flex flex-a-c flex-j-sb h-40rpx>
          <nut-price size="normal" :price="item.price" symbol="¥">
          </nut-price>

        </div>
        <div mt-10px flex flex-a-c flex-j-c>
          <slot name="afterPrice" :res="item"></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { GoodsListType } from '@/components/goods-list/types';
const props = defineProps<{ list: Array<GoodsListType> }>()
const emit = defineEmits(['click-goods'])

function handleClickGoods(item: GoodsListType) {
  emit('click-goods', item)
}
</script>

<style scoped lang="scss">
.wes-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
  line-height: 1;
}
</style>
